<template>
	<div class="app-container">
		<div class="bgWhite radius8 p20" style="padding-bottom: 0;" >
			<el-form class=" flex col-top row-between" :model="queryParams" ref="queryRef" label-width="100px"
				:inline="true">
				<div>
					<el-form-item label="关键词" prop="keywords">
						<el-input v-model="queryParams.keywords" placeholder="不限" clearable class="resetInput"
							style="width: 200px" :suffix-icon="Search"/>
					</el-form-item>
					<el-form-item label="跟进人员" prop="staffId">
						<el-select v-model="queryParams.staffId" placeholder="跟进人员" size="large" style="width: 200px">
							<el-option v-for="dict in teamOptions" :key="dict.userId" :label="dict.userName"
								:value="dict.userId" />
						</el-select>
					</el-form-item>
					<el-form-item label="跟进类型" prop="followupType">
						<el-select v-model="queryParams.followupType" placeholder="跟进类型" size="large"
							style="width: 200px">
							<el-option v-for="dict in bus_followup_type" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="时间范围" prop="time">
						<datePickerRange ref="clearPicker" @dateRangeValue="changeTime"></datePickerRange>
					</el-form-item>
				</div>
				<div class="flex col-center row-end" style="width: 516px;margin-right: 0;">
					<div class="main-color cursor mr5" style="width: 40px;line-height: 18px;" @click="dialogVisible = true,getDeptTree()">高级搜索</div>
					<el-button class="searchBtn" type="defaultBtn" @click="handleQuery">查询</el-button>
					<el-button class="searchBtn" icon="Refresh" @click="resetQuery">重置</el-button>
				</div>
			</el-form>
		</div>

		<div class="bgWhite radius8 mt20">
			<div class="text-center plr30 pt25 border-bottom pb25 relative">
				<span class="fb mr20">跟进记录</span>
				<div class="flex col-center right-btn">
					<el-button class="mt5" type="defaultBtn" v-hasPermi="['followup_record:addRecord']"
						@click="checkIn()">跟进登记</el-button>
				</div>
			</div>
			<div class="mt25 pb30" v-if="list.length > 0">
				<el-timeline style="max-width: 600px">
					<el-timeline-item :timestamp="item.followupTime" placement="top" v-for="(item,i) in list" :key="i">
						<template #dot>
							<img class="bgWhite ml4" style="width: 9px;" src="@/assets/images/circle.png" alt="">
						</template>
						<el-card shadow="never" body-class="card">
							<div class="flex col-center row-between">
								<span class="fb">{{item.staffName}}
									{{item.customerStatusName}} {{item.followupName ? '（'+item.followupName+'）' : ''}}</span>
								<span class="color2 fs12">{{item.followupTime}}</span>
							</div>
							<p class="color2 fs12" v-if="item.dynamicData != ''">
								<span v-for="(items,k) in JSON.parse(item.dynamicData)" :key="k">
									{{items.content ? items.content+';' : ''}}
								</span>
							</p>
							<div class="flex col-end row-between mt10">
								<span class="fs12">来自客户：{{item.customerName}}</span>
								<div class="flex col-end">
									<el-button style="width: 60px;height: 30px;color: #677585;"
										@click="detailDialog(item.id)"
										v-hasPermi="['followup_record:query']">详情</el-button>
									<el-button style="width: 60px;height: 30px;color: #677585;"
										@click="commentFunc(item)"
										v-hasPermi="['followup_evaluation:add']">评论</el-button>
								</div>
							</div>
							<div class="bgWhite radius8 p20 mb15 mt15" v-for="(mes,i) in item.commentList">
								<div class="flex col-center row-between">
									<span class="fb">{{mes.createName}}</span>
									<span class="color2 fs12">{{mes.createTime}}</span>
								</div>
								<div class="color2 mt10">
									{{mes.commentContent}}
								</div>
							</div>
						</el-card>
					</el-timeline-item>
				</el-timeline>
				<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
					v-model:limit="queryParams.pageSize" @pagination="recordList" />
			</div>
			<div v-else>
				<el-empty description="暂无数据"></el-empty>
			</div>
		</div>
		<!-- 高级筛选 -->
		<!-- <filterItem v-if="showFilter == true"
		@queryParamsFunc="queryParamsFunc" 
		@back="showFilter = false" 
		:queryParamsProp="queryParams"
		:teamOptions="teamOptions"
		></filterItem> -->
		<!-- 高级搜索 -->
		<el-dialog title="高级搜索" center v-model="dialogVisible" width="730px" :before-close="handleClose">
			<el-form class="mt20" :model="queryParams" :rules="rules" ref="queryRef" :inline="true" label-width="80px">
				<el-form-item label="关键词" prop="keywords">
					<el-input v-model="queryParams.keywords" placeholder="请输入" class="resetInput"
						style="width: 248px"/>
				</el-form-item>
				<el-form-item label="跟进时间" prop="time" style="margin-right: 0;">
					<el-date-picker @change="changeTime" v-model="time" value-format="YYYY-MM-DD" type="daterange"
					style="width: 248px;"
						range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" size="large" />
				</el-form-item>
				<el-form-item label="客户名称" prop="customerId">
					<el-select style="width: 248px;" v-model="queryParams.customerId" filterable remote reserve-keyword
						:remote-method="customerList" :loading="loading" size="large" placeholder="请输入">
						<el-option v-for="item in customerArr" :key="item.id" :label="item.customerName"
							:value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="跟进类型" prop="followupType" style="margin-right: 0;">
					<el-select v-model="queryParams.followupType" placeholder="请选择" size="large"
						style="width: 248px">
						<el-option v-for="dict in bus_followup_type" :key="dict.value" :label="dict.label"
							:value="dict.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="所属部门" prop="deptId">
					<el-tree-select style="width: 248px"
					    size="large"
					    v-model="queryParams.departmentId"
					    :data="deptOptions"
					    :props="{ value: 'id', label: 'label', children: 'children' }"
					    value-key="id"
					    placeholder="请选择归属部门"
					    check-strictly
					/>
				</el-form-item>
				<el-form-item label="跟进人员" prop="staffId" style="margin-right: 0;">
					<el-select v-model="queryParams.staffId" placeholder="请选择" size="large" style="width: 248px">
						<el-option v-for="dict in teamOptions" :key="dict.userId" :label="dict.userName"
							:value="dict.userId" />
					</el-select>
				</el-form-item>
			</el-form>	
			<div class="text-right mt30">
				<el-button class="cancelSubBtn" @click="dialogTableVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleQuery" class="mainSubBtn">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 详情 -->
		<detailDialog ref="dialog" :message="message" @edit="edit"></detailDialog>
		<!-- 评论 -->
		<commentDialog ref="comment" :message="message" @recordList="recordList"></commentDialog>
		<!-- 添加跟进 -->
		<addDialog ref="dialog2" :customerId="queryParams.customerId" @recordList="recordList"></addDialog>

	</div>
</template>

<script name="addCustomer">
	import {
		recordList,
		followupDetail
	} from '@/api/business/followup'
	import {
		resetForm,
		getUserInfo
	} from '@/utils/ruoyi'
	import {
		getUserListData
	} from "@/api/business/teamOpportunity";
	import {
		customerList//客户列表
	} from "@/api/business/customer";
	import {
	  deptTreeSelect,//部门列表
	} from "@/api/business/opportunity.js";
	import detailDialog from '../components/detail.vue' //详情
	import commentDialog from '../components/comment.vue' //添加评论
	import addDialog from '../components/checkIn.vue' //添加跟进
	import filterItem from '@/components/filterItem/index.vue'
	export default {
		components: {
			detailDialog,
			addDialog,
			commentDialog,
			filterItem
		},
		data() {
			return {
				dialogVisible:false,//高级搜素
				customerId: '', //存在值：指定人员添加跟进
				total: 10,
				pageNum: '',
				pageSize: '',
				time: '',
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					keywords: '', //关键字
					staffId: '', //跟进人员
					followupType: '', //跟进类型
					startTime: '', //开始时间
					endTime: '', //结束时间
					customerId: '',
					deptId:''
				},
				rules:{
					
				},
				teamOptions: '',
				list: [],
				bus_followup_type: this.useDict("bus_followup_type").bus_followup_type,
				bus_customer_status: this.useDict("bus_customer_status").bus_customer_status, //客户状态
				bus_followup_field_management: this.useDict('bus_followup_field_management').bus_followup_field_management,
				message: '', //跟进详情
				operateId: '',
				customerArr:[],//客户列表数据
				deptOptions:[],//所属部门
			}
		},
		created() {
			this.queryParams.customerId = this.$route.query.customerId ? this.$route.query.customerId : ''
			setTimeout(() => {
				this.recordList()
			}, 200)
			this.getUserList()
		},
		methods: {
			queryParamsFunc(e) {
				this.queryParams = e
				this.recordList()
			},
			// 客户名称
			customerList(query) {
				if (query !== '') {
					this.loading = true;
					setTimeout(() => {
						this.loading = false;
						let data = {
							keyWords: query
						}
						customerList(data).then(response => {
							this.customerArr = response.rows;
						});
					}, 200);
				} else {
					this.customerArr = [];
				}
			},
			// 获取部门
			getDeptTree() {
			  deptTreeSelect().then(response => {
			    this.deptOptions = response.data;
			  });
			},
			// 重置
			resetQuery() {
				this.$refs.clearPicker.clearPickerValue()
				this.resetForm("queryRef");
				this.queryParams.startTime = ''
				this.queryParams.endTime = ''
				this.time = ''
				this.handleQuery();
			},
			//时间
			changeTime(e) {
				this.queryParams.startTime = e[0]
				this.queryParams.endTime = e[1]
			},
			// 搜索按钮操作
			handleQuery() {
				this.dialogVisible = false
				this.queryParams.pageNum = 1;
				this.recordList();
			},
			recordList(e) {
				if (e == 'refreshDetail') {
					setTimeout(() => {
						this.detailDialog(this.operateId)
					}, 800)
				}
				recordList(this.queryParams).then(response => {
					this.list = response.rows
					this.total = response.total
					for (let key in this.list) {
						for (let i in this.bus_followup_type) {
							if (this.list[key].followupType == this.bus_followup_type[i].value) {
								this.list[key].followupName = this.bus_followup_type[i].label
							}
						}
						for (let i in this.bus_customer_status) {
							if (this.list[key].customerStatus == this.bus_customer_status[i].value) {
								this.list[key].customerStatusName = this.bus_customer_status[i].label
							}
						}
					}
					this.$forceUpdate()
				})
			},
			/**
			 * 获取本人和下级用户数据
			 */
			getUserList() {
				//获取自己和同部门的用户信息
				getUserListData().then(response => {
					this.teamOptions = response.data;
				});

			},
			//跟进登记
			checkIn() {
				this.$refs.dialog2.open()
			},
			// 详情
			detailDialog(id) {
				this.operateId = id
				followupDetail(id).then(res => {
					this.message = res.data
					for (let i in this.bus_followup_type) {
						if (this.message.followupType == this.bus_followup_type[i].value) {
							this.message.followupTypeName = this.bus_followup_type[i].label
						}
					}
					for (let i in this.bus_customer_status) {
						if (this.message.customerStatus == this.bus_customer_status[i].value) {
							this.message.customerStatusName = this.bus_customer_status[i].label
						}
					}
					this.$refs.dialog.open()
				})
			},
			// 编辑跟进
			edit(e) {
				this.$refs.dialog2.open(e)
			},
			//评论
			commentFunc(item) {
				let dynamicData = JSON.parse(item.dynamicData)
				for (let key in this.bus_followup_field_management) {
					for (let i in dynamicData) {
						if (dynamicData[i].code == this.bus_followup_field_management[key].value) {
							dynamicData[i].label = this.bus_followup_field_management[key].label
						}
					}
				}
				this.message = item
				console.log(dynamicData, 'this.message11')
				this.message.resetDynamicData = dynamicData
				console.log(dynamicData, 'this.message')
				this.$refs.comment.open()
			}
		}
	}
</script>

<style>
	.el-card {
		border: 1px solid #4DACB1;
		background-color: #F7F8FA;
	}

	.right-btn {
		position: absolute;
		right: 30px;
		bottom: 15px;
	}
</style>